<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-card>
      <h1>《实验室用电安全》单元测试</h1>
      <div
        class="mainMeun"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="height: 700px; width: 100%"
      >
        <!-- 判断开始 -->
        <h1>判断题</h1>
        <!-- 实验室用电安全 -->
        <div v-for="(item, index) in YongDianPanDuan" :key="item.index">
          <el-row class="hang">{{ index + 1 + "." }}{{ item.topic }}</el-row>
          <el-radio v-show="item.A" v-model="item.radio" label="A"
            >A:{{ item.A }}</el-radio
          >
          <el-radio v-show="item.B" v-model="item.radio" label="B"
            >B:{{ item.B }}</el-radio
          >
          <el-radio v-show="item.C" v-model="item.radio" label="C"
            >C:{{ item.C }}</el-radio
          >
          <el-radio v-show="item.D" v-model="item.radio" label="D"
            >D:{{ item.D }}</el-radio
          >
          <el-row v-show="LookChange">
            <el-col v-show="item.color == 1">
              <el-col :class="item.color == 1 ? 'red' : 'black'"
                >选择：{{ item.radio }}</el-col
              >
            </el-col>
            <el-col v-show="item.color == 2">
              <el-col :class="item.color == 2 ? 'green' : 'black'"
                >选择：{{ item.radio }}</el-col
              ></el-col
            >
          </el-row>
          <el-row>
            <el-col v-show="AnswerShow">答案:{{ item.answer }}</el-col>
          </el-row>
          <el-row>题目类型：{{ item.mokuai }}</el-row>
        </div>

        <!-- 单选开始 -->
        <h1>单选题</h1>
        <!-- 实验室用电安全 -->
        <div v-for="(item, index) in YongDianDanXuan" :key="item.index">
          <el-row class="hang">{{ index + 1 + "." }}{{ item.topic }}</el-row>
          <el-radio v-show="item.A" v-model="item.radio" label="A"
            >A:{{ item.A }}</el-radio
          >
          <el-radio v-show="item.B" v-model="item.radio" label="B"
            >B:{{ item.B }}</el-radio
          >
          <el-radio v-show="item.C" v-model="item.radio" label="C"
            >C:{{ item.C }}</el-radio
          >
          <el-radio v-show="item.D" v-model="item.radio" label="D"
            >D:{{ item.D }}</el-radio
          >
          <el-row v-show="LookChange">
            <el-col v-show="item.color == 1">
              <el-col :class="item.color == 1 ? 'red' : 'black'"
                >选择：{{ item.radio }}</el-col
              >
            </el-col>
            <el-col v-show="item.color == 2">
              <el-col :class="item.color == 2 ? 'green' : 'black'"
                >选择：{{ item.radio }}</el-col
              ></el-col
            >
          </el-row>
          <el-row>
            <el-col v-show="AnswerShow">答案:{{ item.answer }}</el-col>
          </el-row>
          <el-row>题目类型：{{ item.mokuai }}</el-row>
        </div>

        <!-- 多选题开始 -->
        <h1>多选题</h1>
        <!-- 实验室用电安全 -->
        <div v-for="(item, index) in YongDianDuoXuan" :key="item.index">
          <el-row v-show="item.color == null" class="hang"
            >{{ index + 1 + "." }}{{ item.topic }}</el-row
          >
          <div v-show="LookChange">
            <el-row v-show="item.color == 1" class="hang red">
              {{ index + 1 + "." }}{{ item.topic }}
            </el-row>
            <el-row v-show="item.color == 2" class="hang green">
              {{ index + 1 + "." }}{{ item.topic }}
            </el-row>
          </div>
          <el-checkbox-group v-model="item.array">
            <el-checkbox v-show="item.A" label="A">A:{{ item.A }}</el-checkbox>
            <el-checkbox v-show="item.B" label="B">B:{{ item.B }}</el-checkbox>
            <el-checkbox v-show="item.C" label="C">C:{{ item.C }}</el-checkbox>
            <el-checkbox v-show="item.D" label="D">D: {{ item.D }}</el-checkbox>
          </el-checkbox-group>
          <el-row>题目类型：{{ item.mokuai }}</el-row>
          <el-col v-show="AnswerShow">答案:{{ item.answer }}</el-col>
        </div>

        <div class="footBtn">
          <el-button @click="TanKuangStatus">提交</el-button>
          <el-button type="success" v-show="LookBtn" @click="LookAnswer"
            >查看答案</el-button
          >
          <el-button type="danger" @click="RelogVisible = true"
            >重新考试</el-button
          >
        </div>
        <!-- 重新考试弹窗 -->
        <el-dialog title="提示" :visible.sync="RelogVisible" width="30%" center>
          <span>点击确定按钮后,将重新考试,是否继续?</span>
          <span slot="footer">
            <el-button @click="RelogVisible = false">取 消</el-button>
            <el-button type="primary" @click="Redoing()">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 提交弹窗 -->
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          center
        >
          <span>点击确定按钮后,将显示分数,是否继续?</span>
          <span slot="footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="tijiao()">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 成绩弹窗 -->
        <el-dialog
          title="提示"
          :visible.sync="ChenlogVisible"
          width="30%"
          center
        >
          <h1>本次单元测试分数:{{ this.num }}</h1>
          <span slot="footer">
            <el-button @click="ChenlogVisible = false">取 消</el-button>
            <el-button type="primary" @click="ChenlogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>
          
    <script>
export default {
  created() {
    this.getUserList();
  },
  data() {
    return {
      // 加载
      loading: true,
      // 答案显示状态
      AnswerShow: false,
      // 是否显示答案按钮
      LookBtn: false,
      // 查看选择答案后，题干颜色改变
      LookChange: false,
      // 重新考试弹窗
      RelogVisible: false,
      // 提交弹窗
      dialogVisible: false,
      // 成绩提交弹窗
      ChenlogVisible: false,
      // 总分
      num: 0,
      // 题数
      statu: 100,
      // 实验室用电安全
      // 判断题
      YongDianPanDuan: [],
      // 单选题
      YongDianDanXuan: [],
      // 多选题
      YongDianDuoXuan: [],
    };
  },
  methods: {
    async getUserList() {
      const { data: res } = await this.$http.post(
        "/api/users/lab_elem_Random_bank"
      );
      // console.log(res);
      if (res.code !== 200) {
        this.$message.error("获取题目失败");
        return;
      }
      this.$message.success("获取题目成功！");
      // 实验室用电安全
      this.YongDianPanDuan = res.data.实验室用电安全判断题;
      this.YongDianDanXuan = res.data.实验室用电安全单选题;
      this.YongDianDuoXuan = res.data.实验室用电安全多选题;
      // 加载动画关闭
      this.loading = false;
    },

    // 弹窗状态改变
    TanKuangStatus() {
      this.dialogVisible = true;
    },
    // 提交
    tijiao() {
      // 提交弹窗消失
      this.dialogVisible = false;
      // 遍历获取 tableData 中 radio
      var that = this;
      // 实验室用电安全
      // 判断
      this.YongDianPanDuan.forEach(function (item) {
        if (item.radio != null) {
          // 未答题数量
          that.statu -= 1;
          item.color = 1;
          if (item.radio == item.answer) {
            // 总分
            that.num += 1;
            item.color = 2;
          }
        }
      });
      // 单选题
      this.YongDianDanXuan.forEach(function (item) {
        if (item.radio != null) {
          // 未答题数量
          that.statu -= 1;
          item.color = 1;
          if (item.radio == item.answer) {
            // 总分
            that.num += 1;
            item.color = 2;
          }
        }
      });
      // 多选题
      this.YongDianDuoXuan.forEach(function (item) {
        var DuoAnswer = item.answer;
        // 字符串去逗号
        let str = DuoAnswer.toString();
        const Duo = str.replace(/,/g, "");
        // 数组转为字符串
        var authority = item.array;
        var permission = authority.join("");
        let ArrPer = Array.from(permission).sort().join("");
        if (item.array.length != 0) {
          // 未答题数量
          that.statu -= 1;
          item.color = 1;
          // console.log(ArrPer == Duo);
          if (ArrPer == Duo) {
            // 总分
            that.num += 1;
            item.color = 2;
          }
        }
      });
      // 规定必须答完所有题目
      if (this.statu != 0) {
        this.$message.error("还有" + this.statu + "道题未作答");
        this.statu = 100;
        return;
      }
      // 不能一直点击提交
      if (this.LookBtn == true) {
        this.$message.error("请勿重复提交");
        return;
      }
      // 查看答案按键状态
      this.LookBtn = true;
      this.LookChange = true;
      // 成绩弹窗打开
      this.ChenlogVisible = true;
    },
    // 最终上传成绩
    // async Final() {
    //   const { data: res } = await this.$http.post("/api/users/commitgrade", {
    //     grade: this.num,
    //   });
    //   // console.log(res);
    //   if (res.code !== 200) {
    //     this.$message.error("上传成绩失败");
    //     return;
    //   }
    //   this.$message.success("上传成绩成功！");
    // },
    // 是否显示答案的状态
    LookAnswer() {
      this.AnswerShow = !this.AnswerShow;
    },
    // 重新考试
    Redoing() {
      this.$router.go(0);
    },
  },
};
</script>
    

<style scoped>
.footBtn {
  margin-top: 30px;
  text-align: center;
}
.hang {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 600;
}
.red {
  color: red;
}
.green {
  color: rgb(75, 216, 75);
}
.black {
  color: black;
}
.mainMeun {
  width: 60%;
  /* text-align: left; */
  overflow-y: scroll;
  margin: 0 auto;
}
</style>
